<template>
	<view>
		<view class="order-details">
			<!-- <view class="header-bg"></view> -->
			<view class="main">
				<block v-if="orderDetail.status==10 || orderDetail.status==11">
					<order-pay :orderDetail="orderDetail"></order-pay>
				</block>
				
				
				<block v-if="orderDetail.status>=1 && orderDetail.status<10" >
					
				
				<map name="" 
					style="width: 100%;height: 750upx;margin-bottom: 20upx;position: relative;" 
					:longitude="addressList[0].longitude" 
					:latitude="addressList[0].latitude"
					 :markers="marker"
					 :circles="circlesList"
				>
					<cover-view class="map-radio bg-white flex" v-if="mapTopTips">
						<u-icon name="volume-up" size="48" color="#EA8F77" ></u-icon>
						<cover-view class="m-l-20">{{mapTopTips}}</cover-view>
					</cover-view>
					<cover-view class="map-msg" v-if="mapLeftTips">
						{{mapLeftTips}}
					</cover-view>
				</map>
				</block>
				<view class="cancel-con bg-white p-t-30" v-if="orderDetail.status==1">
					<view class=" text-center p-b-16" style="font-size: 56upx;">
						{{MatchValue | fifterMatch }}
					</view>
					<view class="nr text-center" style="color:rgb(181, 173, 173)">
						正在通知附近司机
					</view>
					<view class="flex m-t-54">
						<view class="text-center flex-1 m-l-50">
							<text class="base-btn" @click="cancelOrderShow">取消订单</text>
						</view>
						<view class="text-center flex-1 m-r-50">
							<text class="base-btn acive"  @tap="show=true">加小费</text>
						</view>
					</view>
				</view>
					
				<view class="address-wrap contain " v-if="orderDetail.driver_id!==0" style="margin-top: 20upx;">
					<view class=" flex  col-top p-b-30"  >
						<u-avatar src="" size="100" @click="collectShow=true"></u-avatar>
						<view class="address m-l-20 flex-1">
							<view>
								<view class="p-b-10" >
									<text class=" xl bold ">粤A8G71G</text>
									<text class="p-l-5 p-r-5 xxl bold">·</text>
									<text>高栏货车</text>
								</view>
								<view class="p-b-10" v-if="orderDetail.status<10">
									车厢长宽高：2.26*1.54*0.37米
								</view>
								<view class="flex row-between">
									<block v-if="orderDetail.status<10">
										<view class="flex">
											<view class="name md m-r-10" >
												{{orderDetail.driver.driver_name}}
											</view>
											<view class="">
												<u-icon name="star-fill" color="#D7E642" ></u-icon>
												<text class="m-l-5">4.95分</text>
											</view>
										</view>
									</block>
									<block v-if="orderDetail.status>=10">
										<view class="flex" style="color: #EE3B09;">
											<view class="m-r-8" @click="eveDriver" >评价司机</view>
											<view style="width: 40upx;height: 40upx;" class="flex row-center">
												<u-icon name="arrow-right"></u-icon>
											</view>
										</view>
									</block>
									<view class="flex">
										<view class="m-r-20">

											<image @click="concatDriver"  src="../../static/order-icon-common.png" mode="" style="width: 48upx;height: 48upx;"></image>

										</view>
										<view class="">
											<image @click="phoneDriver" src="../../static/order-icon-phone.png" mode=""  style="width: 48upx;height: 48upx;"></image>
											<!-- <u-icon name="phone" size="48"@click="phoneDriver" ></u-icon> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex m-t-10 p-t-20" style="border-top: 1px solid #eee;" >
						<view class="flex-1 flex-col text-center" @click="makePhoneCall">
							<view class="">
								<image src="../../../static/images/order-icon-police.png" mode="" style="width: 40upx;height: 40upx;"></image>
							</view>
							<view class="lighter xs">
								立即报警
							</view>
						</view>
						<view class="flex-1 flex-col text-center" @click="actionFirm">
							<view class="">
								<image src="../../static/dr_collect.png" mode="" style="width: 40upx;height: 40upx;"></image>
							</view>
							<view class="lighter xs">
								收藏司机
							</view>
						</view>
						<view class="flex-1 flex-col text-center" @click="changeDriver('CHANGE')" v-if="orderDetail.status<6">
							<view class="">
								<image src="../../../static/images/order-icon-change.png" mode="" style="width: 40upx;height: 40upx;"></image>
							</view>
							<view class="lighter xs" >
								更换司机
							</view>
						</view>
						<view class="flex-1 flex-col text-center " @click="hasCancleOrderFun" v-if="orderDetail.status<6">
							<view class="">
								<image src="../../../static/images/order-icon-cancle.png" mode="" style="width: 40upx;height: 40upx;"></image>
							</view>
							<view class="lighter xs">
								取消订单
							</view>
						</view>
						<view class="flex-1 flex-col text-center" @click="concatServer">
							<view class="">
								<image src="../../../static/images/order-icon-server.png" mode="" style="width: 40upx;height: 40upx;"></image>
							</view>
							<view class="lighter xs">
								联系客户
							</view>
						</view>
					</view>
				</view>
				
				
				
				
				
				<view class="  contain " style="padding: 18rpx 20rpx;"  @click="lookMap" >
					<view class="" v-for="(item,index) in addressList" :key="item.id" style="position: relative;">
						<view class=" p-t-30 p-b-30">
							<view class="base-left p-l-20  p-t-30 p-b-30 bold" style="color: #A5A5A5;" :class="index==0?'start-before':index==addressList.length-1?'end-before':'flag-before'">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="p-t-20 bold primary flex xl row-right">
						约{{orderDetail.distance_text}}
					</view>
				</view>
				
				
				<view class="base-con info-con bg-white ">
					<view class="p-b-48" style="border-bottom: 1px solid rgba(244, 243, 243, 100);">
						<view class="flex row-between p-b-32" style="border-bottom: 1px solid rgba(244, 243, 243, 100);">
							<view class="bold xxl">订单信息</view>
							<view class="flex xxl bold">
								{{orderDetail.total_amount}}元
								<view class="flex row-center" style="width: 48upx;height: 48upx;">
									<!-- <u-icon name="arrow-right" size="28" ></u-icon> -->
								</view>
							</view>
						</view>
						<view class="m-t-32">
							<view class="">
								<view class="" v-for="(item,index) in addressList" :key="item.id" style="position: relative;" @click="lookMap">
									<view class=" m-t-40">
										<view class=" p-l-20 bold flex"  >
											<view class="m-r-20" :class="index==0?'before-address':'after-address'">
											</view>
											<view class="lg">
												{{item.name}}
											</view>
										</view>
										<view style="color: #B5ADAD;" class="p-l-60">
											{{item.address_desc + item.name}}
										</view>
									</view>
								</view>
							</view>
							<view class="m-t-60 flex  row-between">
								<view class="add-commonl xs" @click="addCommitRoute">
									添加至常用路线
								</view>
						
							<view class="change-car flex-content" @click="changeCarType" 
							v-show="orderDetail.status==1&&orderDetail.type==2">
								改叫专车
							</view>
								</view>
						</view>
					</view>
					<view class="flex p-b-30 row-between p-t-32">
						<view class="title">订单编号</view>
						<view  >
							<text style="color: #B5ADAD ;">{{orderDetail.order_sn}}</text>
							<text class="theme-color m-l-12" @click="copyFun(orderDetail.order_sn)">复制</text>
						</view>
					</view>

					<view class="flex p-b-30 row-between">
						<view class="title">订单时间</view>
						<view  class="balck" >
							{{orderDetail.create_time}}
						</view>
					</view>
					<view class="flex p-b-30 row-between">
						<view class="title">订单车型</view>
						<view  class="balck" >
							{{orderDetail.car_name}}
						</view>
					</view>
					<view class="flex p-b-30 row-between">
						<view class="title">联系人</view>
						<view  class="balck" >
							{{orderDetail.mobile}}
						</view>
					</view>
					<view class="flex p-b-30 row-between">
						<view class="title">开票类型</view>
						<view  class="balck" >
							电子普票
						</view>
					</view>
				</view>
				
				<!-- <view class="order-info contain">
					
					<view class="item flex">
						<view class="title">订单类型</view>
						<view class="black">{{orderDetail.category_name}}</view>
					</view>
					<view class="item flex">
						<view class="title">需求车型</view>
						<view class="black">{{orderDetail.type}}</view>
					</view>
					<view class="item flex">
						<view class="title">车辆类型</view>
						<view class="black">{{orderDetail.car_name}}</view>
					</view>
					
					<view class="item flex">
						<view class="title">下单时间</view>
						<view class="black">{{orderDetail.create_time}}</view>
					</view>
					<view v-if="orderDetail.pay_time" class="item flex">
						<view class="title">付款时间</view>
						<view class="black">{{orderDetail.pay_time}}</view>
					</view>
				</view> -->
				<!-- <view class="order-info contain ">
					<view class="item flex bold row-between">
						<view>{{orderDetail.pay_status_desc}}</view>
						<view class="flex primary">
							<view class="xxs">￥</view>
							<view class="xl">{{orderDetail.total_amount}}</view>
						</view>
					</view>
				</view> -->
				<block v-if="orderDetail.status!=10 && orderDetail.status!=11">
					
					<order-pay :orderDetail="orderDetail"></order-pay>
				</block>
				
				
				
				<view class="bg-white p-20 br20" v-if="back_photo.length!=0" style="margin: 0 20rpx 20rpx;">
					<view class="bold fz32 p-b-10 p-l-10 xl">
						照片回传
					</view>
					<view class="flex" style="flex-wrap: wrap;">
						<view class="m-r-10 m-t-10" v-for="(item,index) in back_photo" :key="item.id" @click="lookBack(index)" style="width: 23%;border-radius: 10rpx;overflow: hidden;">
							<image :src="item.img" mode="" style="width: 100%;height: 150rpx;"></image>
						</view>
					</view>
				</view>
				
				<!-- <view class="bg-white p-20 br20" style="margin: 0 20rpx 20rpx;" v-if="!!orderDetail.carry_extra_price && !!orderDetail.extra_price">
					<view class="m-b-10" v-if="!!orderDetail.carry_extra_price">
						<view class="bold xl flex p-b-20">
							<view class="m-r-20">搬运费用</view>
							<view class="flex col-baseline" style="color: #df563b;">
								<view class="xxs">￥</view>
								<view>{{orderDetail.carry_extra_price || 0}}</view>
							</view>
						</view>
						<view class="bg-body p-20 lighter">
							{{orderDetail.carry_explain || '暂无说明'}}
						</view>
					</view>
					<view v-if="!!orderDetail.extra_price">
						<view class="bold xl flex p-b-20">
							<view class="m-r-20">其他费用</view>
							<view class="flex col-baseline" style="color: #df563b;">
								<view class="xxs">￥</view>
								<view>{{orderDetail.extra_price || 0}}</view>
							</view>
						</view>
						<view class="bg-body p-20 lighter">
							{{orderDetail.extra_explain || '暂无说明'}}
						</view>
					</view>
				</view> -->
				<view class="bg-white footer-con" v-if="orderDetail.status==10 && orderDetail.order_amount>orderDetail.advance_amount"  >
					<view class="footer-btn" @tap.stop="payEnd">
						支付其他费用
					</view>
				</view>
				<view class="bg-white footer-con" v-if="orderDetail.status==10  && orderDetail.order_amount<=orderDetail.advance_amount && orderDetail.pay_status==1" >
					<view class="footer-btn"@tap.stop="comfirmOrderFun">
						确认到达
					</view>
				</view>
				<!-- v-if="false" -->
				<view class="footer bg-white flex fixed"
					
					>
					<view class="flex-1"></view>
					<view  class="m-r-20" v-if="orderDetail.status>1 && orderDetail.status<10 ">
						<button size="sm" class="plain br60" hover-class="none" @tap="concatDriver">联系司机</button>
					</view>
					<!-- <view v-if="orderDetail.status<11 && orderDetail.is_pay_end==0" >
						<button size="sm" class="plain br60" hover-class="none" @tap="show=true" >追加小费</button>
					</view> -->
					<view v-if="orderDetail.status==10  && orderDetail.order_amount<=orderDetail.advance_amount && orderDetail.pay_status==1" class="m-l-20">
						<button size="sm" class="plain br60 primary red" hover-class="none"
							@tap.stop="comfirmOrderFun">确认到达</button>
					</view>
					<view v-if="orderDetail.status==10 && orderDetail.order_amount>orderDetail.advance_amount" class="m-l-20">
						<button size="sm" class="bg-primary br60 white" hover-class="none"
							@tap.stop="payEnd">支付尾款</button>
					</view>
					<view v-if="orderDetail.status==11 && orderDetail.is_appraise==0" class="m-l-20">
						<button size="sm" class="bg-primary br60 white" hover-class="none"
							@tap.stop="eveDriver">评价司机</button>
					</view>
					<view v-if="orderDetail.del_btn">
						<button size="sm" class="plain br60" hover-class="none" @tap="delOrder">删除订单</button>
					</view>
					<view class="m-l-20" v-if="orderDetail.pay_status==0 && orderDetail.pay_way!=4&&orderDetail.status==10">
						<button size="sm" class="bg-primary br60 white" @tap="payNow">立即付款</button>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="eveShow"  mode="bottom" :closeable="true" border-radius="10" >
			<view class="p-l-34 p-r-34 p-b-32 p-t-34">
				<view class="text-center m-b-32 p-t-20">
					<u-rate inactive-color="#C6C3C3" :count="5" v-model="star" size="64" :min-count="1" active-color="#df563b" gutter="26"	></u-rate>
				</view>
				<view class="flex flex-wrap">
					<view  class=" text-center flex row-center" v-for="(item,index) in labelList" style="flex:0 0 33%">
						<view :class="{'label-active':item.active}"  class="label-item" @click="checkLabel(index)" >
							{{item.name}}
						</view>
						
					</view>
				</view>
				<view class="p-l-34 p-r-34">
					<u-input v-model="details" placeholder="匿名反馈,将更好的帮助我们管控司机" :border="true" height="100" ></u-input>
				</view>
				<view class="m-t-36 eva-popup-btn" @click="appraiseAddFun">
					匿名提交
				</view>
			</view>
			
		</u-popup>
		
		
		<u-popup v-model="show" mode="bottom"  :closeable="true" close-icon-pos="top-left" border-radius="10">
			<view class="chase-popup">
				<view class="bold text-center xxl">
					加小费
				</view>
				<view class=" m-t-30 lg m-b-30 bold" style="color: #b7b5b5;">
					您将在订单完成后向司机支付小费
				</view>
				<view class="flex ">
					<view class="flex-content  price-content" :class="item.id==selectindex?'select-style':''" @click="selectPrice(item)" v-for="(item,index) in priceList" :key="index">
						{{item.text}}元
					</view>
				</view>
				<view class="p-10 m-t-36 p-l-30 br10 " style="background-color: #FFFFFF; border: 2rpx solid #E8E8E8;">
					<u-input type="number" @focus="clearTip" value="" v-model="tip"  placeholder="请输入整数金额"  />
				</view>
				<view class="m-t-25 mobile-btn" @click="addTipCostFun">
					确认
				</view>
			</view>
		</u-popup>
		<u-popup v-model="hasCancelShow" mode="bottom" border-radius="10">
			<view class="cancel-popup">
				<view class="black lg bold">
					司机已到达发货地，建议先和司机沟通确认。
				</view>
				<view class="black lg bold">
					您可能需要：
				</view>
				<view class="flex change-btn row-between" @click="changeDriver('CHANGE')">
					<view class="flex">
						<image src="../../../static/images/order-icon-change.png" mode="" style="width: 40upx;height: 40upx;"></image>
						<text class="m-l-16">更换司机</text>
					</view>
					<view class="flex row-center" style="width: 40upx;height: 40upx;">
						<u-icon name="arrow-right" color="#978D8D"></u-icon>
					</view>
				</view>
				<view class="m-t-48 black bold">
					此时取消，平台将进行责任审核；多次判定为您的责
					任，将影响后续叫车服务
				</view>
				<view class="m-t-16 flex">
					<view class="xs m-r-8" style="color: #A4A0A0;">
						订单取消规则
					</view>
					<view class="flex row-center" style="width: 40upx;height: 40upx;">
						<u-icon name="arrow-right" color="#978D8D"></u-icon>
					</view>
				</view>
				<view class="" style="margin-top: 70upx;">
					<view class="text-center sure-cancle" @click="changeDriver('CANCLE')" >填写原因并取消</view>
					<view class="text-center close-cancle"  @click="hasCancelShow=false">我在想想</view>
				</view>
			</view>
		</u-popup>
		<!--  -->
		<u-action-sheet :list="colleList" v-model="collectShow" @click="actionFirm"></u-action-sheet>
		<!-- <float-tab></float-tab> -->
		<u-modal v-model="showmodal" title="成功添加至常用路线" confirm-text="我知道了" confirm-color="#E85631">
					<view class="slot-content">
						<view class="flex-content m-t-36 m-t-42">
							<view class="">
								<view class="" style="color: #A6A5A5;">
									以后前往 <text style="color:#E85631 ;">首页-常用路线</text>  可实现
								<view class="flex-content">
									快速下单哦~
								</view>	
								</view>
							</view>
						</view>
					</view>
				</u-modal>
					<u-popup v-model="propulecar" mode="bottom " border-radius="14">
							<view class=" bg-white" >
								<view class="flex-content bold  xxl p-t-38" style="width: 100%;" @click="changeCarType()">
									改叫专车
								</view>
								<view class="flex-content" >
												<image style="width: 308rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/d0e19bdc-9ece-4fd2-8764-e1511a1b810c.png" mode="widthFix"></image>	
								</view>
								<view class="flex m-t-32">
									<view  class="xxs m-l-70" style="color: #C3C3C3 ;">
										改叫后金额
									</view>
									<view class="changetype-btn flex-content">
										￥{{price}}
									</view>
								</view>
								<view class="line-style">
									
								</view>
							
								
				
								<view style="width: 100%;color: #A6A5A5;" class="flex-content xs m-t-24">
									专车司机响应速度会更快
								</view>
								<view style="width: 100%;color: #A6A5A5;" class="flex-content xs m-t-24">
									原订单金额为{{pricetow}}元
								</view>
								<view class="flex-content m-t-36 p-b-44"  >
									<view class="colse-btn flex-content" @click="colseChangeCar">
										取消
									</view>
									<view class="affirm-btn flex-content" @click="affirmChangeCar">
										确认
									</view>
								</view>
							</view>
						</u-popup>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		cancelOrder,
		confirmOrder,
		addTipCost
	} from '@/api/order';
	import {
		getupTypeData,
		setupTypeData
	}from "@/api/car"
	import {
		collectDriver
	} from '@/api/user';
	import {
		prepay
	} from '@/api/app';
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import {copy} from '@/utils/tools.js';
	import {getLabel,appraiseAdd} from '@/api/car';
	import GDMap  from '@/js_sdk/amap-wx/amap-wx.130'
	import {addRoute} from "@/api/car"
	export default {
		data() {
			return {
				paytype:"待支付",
				showmodal:false,
				selectindex:1,
				mapLeftTips:'',
				circlesList:[],
				mapTopTips:'',
				hasCancelShow:false,
				colleList: [{
					text: '收藏'
				},{
					text:'查看评价'
				}
				],
				priceList:[
					{
						id:1,
						text:"10"
					},
					{
						id:2,
						text:"15"
					},
					{
						id:3,
						text:"20"
					},
					{
						id:4,
						text:"25"
					}
				],
				collectShow: false,
				show:false,
				smprice:"10",
				tip:'',
				orderDetail: {
					shop: {}
				},
				team: {},
				price:"",
				pricetow:"",
				isFirstLoading: true,
				type: 0,
				cancelTime: 0,
				showCancel: "",
				showLoading: false,
				addressList:[],
				addressFlag:true,
				back_photo:[],
				
				marker:[],
				mapgd:null,
				targetAddress:'',
				
				
				MatchTime:null,
				MatchValue:0,
				
				eveShow:false,
				
				star:5,
				details:'',
				labelList:[],
				propulecar:false,
			};
		},
		
		onLoad: function(options) {
			this.mapgd =  new GDMap.AMapWX({key:'364c1096e6b21c6e94ffaf5cc02e4d08'});
			const {
				id
			} = this.$Route.query;
		
			this.id = id;
			this.getOrderDetailFun();
			
			uni.$on('orderChange',()=>{	
				this.getOrderDetailFun();
			})
		},
		onUnload() {
			//页面卸载关闭
			if(this.webstockt.open){
				this.webstockt.center.close();
			}
			
		},
		filters:{
			fifterMatch(val){
				let h = Math.floor(val/60);
				let s = val%60;
				
				return (h<10?'0'+h:h) + '分' + (s<10?'0'+s:s) + '秒'
			}
		},
		watch:{
			
		},
		methods: {
			//确认该叫专车
			async affirmChangeCar(){
				let res= await setupTypeData({id:this.orderDetail.id})
				this.getOrderDetailFun();
				this.propulecar=false
			},
			//改叫专车
			async changeCarType(){
			let res=await getupTypeData({id:this.orderDetail.id})
			this.pricetow=res.data.price_two
			this.price=res.data.price
			this.propulecar=true
			
			},
			//关闭弹窗
			colseChangeCar(){
				this.propulecar=false
			},
			makePhoneCall(){
				uni.makePhoneCall({
					phoneNumber:"110"
				})
			},
			clearTip(){
				this.smprice=""
				this.selectindex=-1
			},
			selectPrice(item){
				this.tip=""
				this.smprice=item.text
			    this.selectindex=item.id
			},
			appraiseAddFun(){
				let {details,star,labelList} = this;
				
				let label_lists = [];
				this.labelList.forEach((item)=>{
					if(item.active == true){
						label_lists.push(item.id)
					}
				})
				if(star==1 && details==''){
					this.$toast({
						title:'当前评价较低，需要填写评价内容'
					})
					return 
				}
				appraiseAdd({order_id:this.id,details,star,label_lists}).then(res=>{
					if(res.code==1){
						this.$toast({
							title:"评价成功"
						})
						this.eveShow = false;
						this.getOrderDetailFun();
					}
				})
			},
			checkLabel(index){
				this.labelList[index].active = !this.labelList[index].active
			},
			getLabelFun(){
				getLabel().then(res=>{
					let arr = res.data.lists;
					arr.forEach(item=>{
						item.active = false;
					})
					this.labelList = arr.concat();
					
				})
			},
			async initMessage(){
				const {orderDetail} = this;
				let {status_desc,status} = orderDetail
				 uni.setNavigationBarTitle({
				 	title:status_desc
				 })
				 if(status==2){
					 this.mapTopTips = '司机已接单，请耐心等待…'
				 }
				 if(status==3){
					const {addressList} = this;
					this.targetAddress = addressList[0].longitude + ',' +  addressList[0].latitude
					this.mapTopTips = `司机正在前往${addressList[0].name},请耐心等待`
					
				 }
				 if(status==4){
					 this.mapTopTips = `司机已到达起点,请耐心等待`
				 }
				 if(status==5){
					 this.mapTopTips = `正在装货中,请耐心等待`
				 }
				 if(status==6){
					 const {addressList} = this;
					 this.targetAddress = addressList[1].longitude + ',' +  addressList[1].latitude
					 this.mapTopTips = `司机正在前往${addressList[1].name},请耐心等待`
				 }
				 if(status==7){
					 this.mapTopTips = `司机已到达终点,请耐心等待`
				 }
				 if(status==8){
				 	 this.mapTopTips = `正在卸货中,请耐心等待`
				 }
				 if(status==9){
				 	 this.mapTopTips = `司机正在回程,请耐心等待`
				 }
				 else{
					 this.mapLeftTips = ''
				 }
			},
			getMapLeftTips(distance,duration){
				const {orderDetail} = this;
				let {status_desc,status} = orderDetail
				
				if(status==3 || status==6){
					this.mapLeftTips =  `距离目的地${distance},预计${duration}到达`
				}
				else{
					this.mapLeftTips = ''
				}
			},
			getDistance(origin,destination){

				return new Promise((resolve,reject)=>{
					this.mapgd.getDrivingRoute({
						origin,
						destination,
						success:res=>{
							let cost = parseInt(res.paths[0].duration/60) + '分钟';
							let distance = (res.paths[0].distance/1000).toFixed(2)  + '千米'
							
							resolve({distance,cost})
							// console.log(res)
						},
						fail:err=>{
							reject(err)
						}
					})
				})
				
				
			},
			async webstocktInit(){
				this.webstockt.user_id = this.orderDetail.user_id;
				this.webstockt.order_id = this.id;
				
				this.socketAddrssInit();
				
				
				
				this.webstockt.center.onMessage(res=>{
			
					if(res!=='sendSocketMessage:ok'){
						let result = JSON.parse(res.data)
					
						if(result.code==200){
							// 经纬度存在进行
							if(!!result.data.message?.latitude && !!this.marker[2]?.latitude ){
								this.marker[2].latitude = Number(result.data.message.latitude);
								this.marker[2].longitude = Number(result.data.message.longitude);
								let str = result.data.message.longitude+ ',' + result.data.message.latitude
								this.socketOnMessage(str)
							}
							else if(!!result.data.message?.latitude && !this.marker[2]?.latitude){
								this.marker.push({
									id:3,
									iconPath:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2cb47d34-0bce-4d35-acf7-2c76729b8c27/b7acd2fc-bfb5-489f-9c7c-1ef58d725c30.png',
									latitude: Number(result.data.message.latitude),
									longitude:Number(result.data.message.longitude),
									width:40,
									height:40
								})
							}
							
							if(result.data.message?.updateOrder){
								this.getOrderDetailFun();
								return 
							}
							
							
						}
					}
				})
			},
			async socketOnMessage(str){
				const tip =  await this.getDistance(str,this.targetAddress);
			
				this.getMapLeftTips(tip.distance,tip.cost)
			},
			
			changeDriver(type){
				let id = this.orderDetail.id;
				uni.navigateTo({
					url:'/bundle/pages/reason/reason?type=' + type + '&id=' + id
				})
			},
			hasCancleOrderFun(){
				this.hasCancelShow = true;
			},
			copyFun(str){
				copy(str)
			},
			concatServer(){
				uni.navigateTo({
					url:'/bundle/pages/contact_offical/contact_offical'
				})
			},
			eveDriver(){
				
				if(this.orderDetail.is_appraise==1){
					this.$toast({
						title:'您已评价过了'
					})
					return 
				}
				this.eveShow = true;
				
				// let {id} = this.orderDetail;
				// uni.navigateTo({
				// 	url:'/bundle/pages/user_evaluate/user_evaluate?id=' + id
				// })
				
			},
			concatDriver(){
				// if(!this.orderDetail.im_id){
				// 	this.$toast({
				// 		title:'房间不存在'
				// 	})
				// 	return 
				// }
				let {id,user_id,im_id,order_sn} = this.orderDetail;
				let name = this.orderDetail.driver.driver_name;
				
				// console.log(`/pages/chat_detail/chat_detail?order_id=${id}&user_id=${user_id}&im_id=${im_id}&dr_name=${name}`);
				uni.navigateTo({
					url:`/pages/chat_detail/chat_detail?order_id=${id}&user_id=${user_id}&im_id=${im_id}&dr_name=${name}`
				})
			},
			async addCommitRoute(){
				let transport_address=this.orderDetail.address
				let requestData={
					user_name:this.orderDetail.user_name,
					mobile:this.orderDetail.mobile,
					transport_address:JSON.stringify(transport_address)
				}
				 
				let res=await addRoute(requestData)
				this.showmodal=true
			},
			phoneDriver(){
				
				
				let driver = this.orderDetail.driver
				uni.makePhoneCall({
					phoneNumber:driver.mobile
				})
			},
		
			actionFirm(e){
			
				let driver_id = this.orderDetail.driver.id
			
					collectDriver({
						driver_id
					}).then(({code,msg})=>{
						if(code==1){
							this.$toast({
								title:'收藏成功'
							})
						}
					})
				
				if(e==1){
					uni.navigateTo({
						url:'/bundle/pages/driver_rate/driver_rate?id=' + driver_id
					})
				}
			},
			// 追加小费
			addTipCostFun(){
				let tippice=""
				if(this.smprice!=''){
					tippice=this.smprice
				}else{
					tippice=this.tip
				}
				
				addTipCost({
					id:this.orderDetail.id,
					tip_price:tippice
				}).then(res=>{
					if(res.code==1){
						this.$toast({
							title:'追加成功'
						})
					}
					this.tip=""
					this.smprice=""
					this.show = false;
					this.getOrderDetailFun();		
				})
			},
			initAddress(){
				let arr = this.orderDetail.address.concat();
				
				
				if(this.addressFlag==false){
					return 
				}
				arr.forEach((item,index)=>{
					if(index==arr.length-1){
						let obj1 = {
							// address_desc:
							name:arr[index].start_address,
							longitude:arr[index].start_longitude,
							latitude:arr[index].start_latitude,
						};
						obj1.address_desc = arr[index].start_province + arr[index].start_city + arr[index].start_district
						let obj2 = {
							// address_desc:arr[index].end_province + arr[index].end_city + arr[index].end_district
							name:arr[index].end_address,
							longitude:arr[index].end_longitude,
							latitude:arr[index].end_latitude,
						}
						obj2.address_desc = arr[index].end_province + arr[index].end_city + arr[index].end_district
						this.addressList.push(obj1)
						this.addressList.push(obj2)
					}
					else{
						let obj = {
							name:arr[index].start_address,
							longitude:arr[index].start_longitude,
							latitude:arr[index].start_latitude,
						};
						this.addressList.push(obj)
					}
				})
				
				
				
			},
			getMarsk(){
				if(this.addressFlag==false){
					return 
				}
				this.addressList.forEach((item,index)=>{
					
					let obj = {
						...item,
						id:index,
						iconPath:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2cb47d34-0bce-4d35-acf7-2c76729b8c27/49d81866-02e0-4d5c-b04a-ab247586d517.png',
						width:30,
						height:30
					}
					if(index==0){
							let circlesObj={
											longitude:item.longitude,
											latitude:item.latitude,
											fillColor:"#31E8A523",
											radius:260,
											color:"#31E8A523"
										}
									this.circlesList.push(circlesObj)
					}
					
					if(index==1){
						obj['iconPath'] = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2cb47d34-0bce-4d35-acf7-2c76729b8c27/28634cf7-45bf-4f15-a4ef-443c3cf917a4.png'
					}
					
					this.marker.push(obj)	
					
				})
				if(this.orderDetail.status!=1){
					this.marker.push({
						id:3,
						iconPath:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2cb47d34-0bce-4d35-acf7-2c76729b8c27/b7acd2fc-bfb5-489f-9c7c-1ef58d725c30.png',
						latitude:23.084203,
						longitude:113.317412,
						width:40,
						height:40
					})
				}
				
			},
			onRefresh() {
				uni.$emit("refreshorder")
				const {
					type
				} = this
				if ([0, 2].includes(type)) {
					this.getOrderDetailFun();
				} else if (type == 1) {
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			},
			orderDialog() {
				this.$refs.orderDialog.open()
			},

			delOrder() {
				this.type = 1
				this.$nextTick(() => {
					this.orderDialog();
				});
			},
			
			comfirmOrderFun() {
				
				confirmOrder({
					id:this.id
				}).then(res=>{
					if(res.code==1){
						this.$toast({
							title:'确认成功'
						})
						this.$nextTick(() => {
							this.orderDetail.status = 11
							// this.orderDialog();
						});
					}
				})
				// this.type = 2
				// this.$nextTick(() => {
				// 	this.orderDialog();
				// });
			},
			cancelOrderShow(){
				var _this = this;
				uni.showModal({
					title:'提示',
					content:'是否取消该订单吗，每天仅限取消三次',
					success:res=>{
						if(res.confirm){
							_this.cancelOrderFun();
						}
					}
				})
			},
			cancelOrderFun() {
				cancelOrder({
					id:this.orderDetail.id
				}).then(res=>{
					
					if(res.code==1){
						this.$toast({
							title:'取消成功'
						})
						this.$nextTick(() => {
							this.orderDetail.status = 12
							// this.orderDialog();
						});
					}
				})
				
				this.type = 0
				
			},
			payEnd(){
				uni.$on('payment', params => {
					setTimeout(() => {
						if (params.result) {
							this.$toast({ title: "支付成功" })
							this.getOrderDetailFun();
							uni.$emit("refreshorder")
							uni.$off("payment")
						} else {
							this.$toast({ title: "支付失败" })
						}
					}, 500)
				})
				let price = this.orderDetail.subjoin_amount
				uni.navigateTo({
					url: `/pages/payment/payment?from=subjoin&order_id=${this.id}&price=${price}`
				})
			},
			payNow() {
				uni.$on('payment', params => {
					setTimeout(() => {
						if (params.result) {
							this.$toast({ title: "支付成功" })
							this.getOrderDetailFun();
							uni.$emit("refreshorder")
							uni.$off("payment")
						} else {
							this.$toast({ title: "支付失败" })
						}
					}, 500)
				})
				let price = this.orderDetail.order_amount
				uni.navigateTo({
					url: `/pages/payment/payment?from=transport&order_id=${this.id}&price=${price}`
				})
			},

			getOrderDetailFun() {
				getOrderDetail({id:this.id}).then(res => {
				
					if (res.code == 1) {
						this.back_photo = res.data.file;
						this.cancelTime = res.data.order_cancel_time - Date.now() / 1000;
						this.orderDetail = res.data
						this.team = res.data.team || {}
						this.$nextTick(() => {
							this.isFirstLoading = false
						});
						if(res.data.status==1){
							const date = new Date(res.data.create_time).getTime();
							const newData = new  Date().getTime();
							this.MatchValue = Math.ceil((newData-date)/1000);
							this.MatchTime = setInterval(()=>{
								this.MatchValue = this.MatchValue + 1;
							},1000)
						}
						
					} else {
						setTimeout(() => uni.navigateBack(), 1500)
					}
					this.initAddress();
					this.initMessage();
					this.getMarsk();
					
					this.getLabelFun();
					if(this.orderDetail.status<10 && !this.webstockt.open && !this.webstockt.center!==null){
						 
						this.webstocktInit();
					}
					if(this.orderDetail.status>=10 && this.webstockt.open){
						this.webstockt.center.close()
					}
					
					this.addressFlag = false
				});
			},
			// 查看地图
			lookMap(){
				let arr = this.addressList
				
				let origin = arr[0].longitude + ',' + arr[0].latitude
				let destination = arr[arr.length-1].longitude + ',' + arr[arr.length-1].latitude
				uni.navigateTo({
					url:'/bundle/pages/map/map?origin=' + origin +  '&destination=' + destination
				})
			},
			lookBack(current){
				
				let imgList = [];
				this.back_photo.forEach(item=>{
					imgList.push(item.img)
				})
				
				 uni.previewImage({
					 urls:imgList,
					 current,
					 fail:err=>{
						
					 }
				 })
			}
		},
		computed: {

		}
	};
</script>
<style lang="scss" scoped>
	.affirm-btn{
		height: 68rpx;
		width: 222rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		background-color: #E85631;
		margin-left: 66rpx;
	}
	.colse-btn{
		height: 68rpx;
		width: 222rpx;
		border-radius: 10rpx;
		color: #E85631;
		border: 2rpx solid #E85631;
	}
	.line-style{
		background-color: #F0EFEF;
		width: 100%;
		height: 2rpx;
		margin-top: 44rpx;
	}
	.m-l-70{
		margin-left: 102rpx !important;
	}
	.change-car{
		width: 160rpx;
		height: 68rpx;
		color: #E85631;
		border: 2rpx solid #E85631;
		border-radius: 10rpx;
	}
	.select-style{
		color: #E85631;
		border: 2rpx solid #E85631 !important;
	}
	.price-content{
		width: 160rpx;
		border-radius: 16rpx;
		border: 2rpx solid #E8E8E8;
		height: 80rpx;
	}
	.price-content:nth-child(2){
		margin-left: 24rpx;
	}
	.price-content:nth-child(3){
		margin-left: 24rpx;
		margin-right: 24rpx;
	}
	$themeColor:#EA6E4C;
	.theme-color{
		color: $themeColor;
	}
	.changetype-btn{
		color: #E85631;
		font-size: 48rpx;
		height: 86rpx;
		padding-right: 24rpx;
		margin-left: 34rpx;
		border-radius: 48rpx;
		padding-left: 24rpx;
		font-weight: bold;
		box-shadow: 0rpx 0rpx 8rpx rgba(0, 0, 0, 0.15);;
	}
	.cancel-popup{
		padding: 52upx 48upx 80upx 48upx;
		.change-btn{
			background-color: #F7F3F3;
			padding: 36upx 32upx;
			margin-top: 20upx;
			border-radius: 16upx;
		}
		.sure-cancle{
			display: inline-block;
			width: 306upx;
			height: 80upx;
			line-height: 80upx;
			border-radius: 8upx;
			border: 2upx solid #bbb;
			color: #262625;
			margin-right: 42upx;
		}
		.close-cancle{
			display: inline-block;
			width: 306upx;
			height: 80upx;
			line-height: 80upx;
			border-radius: 8upx;
			border: 2upx solid #CE6D51;
			color: #CE6D51;
		}
	}
	.base-con{
		width: 720upx;
		margin: 0 auto;
	}
	.pay-con{
		padding: 32upx 22upx 24upx 22upx;
		background-color: #fff;
		border-radius: 12upx;
	}
	.chase-popup{
		padding: 32upx 40upx;
	}
	.info-con{
		padding: 58upx 24upx 0 24upx;
		.title{
			color: #B5ADAD;
		}
		.black{
			
		}
	}
	.cancel-con{
		width: 720upx;
		margin: 0 auto;
		height: 322upx;
		border-radius: 10upx;
		margin-bottom: 20upx;
		.base-btn{
			border-radius: 8upx;
			width: 224upx;
			height: 64upx;
			line-height: 64upx;
			text-align: center;
			display: inline-block;
			border: 2upx solid #bbb;
			color: #101010;
			font-size: 28upx;
			&.acive{
				border: 2upx solid #EA6E4C !important;
				color: #EA6E4C !important;
			}
		}
	}
	.map-msg{
		position: absolute;
		background-color: #fff;
		top: 50%;
		transform: translate(0,-50%);
		height: 64upx;
		line-height: 64upx;
		padding: 0 12upx;
		margin-left: 10upx;
		border-radius: 5upx;
	}
	.map-radio{
		
		width: 90%;
		margin: 0 auto;
		margin-top: 30upx;
		padding: 16upx 20upx ;
		border-radius: 10upx;
	}
	
	.bt {
		width: 100%;
		text-align: right;
	}

	.order-details {
		position: relative;
		padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
	}

	.order-details .header-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 200rpx;
		background-color: $-color-primary;
		z-index: 0;
	}

	.order-details .goods .status {
		height: 88rpx;
		padding: 0 20rpx;
	}

	.order-details .main {
		position: relative;
		z-index: 1;
	}

	.order-details .contain {
		margin: 0 20rpx 20rpx;
		border-radius: 14rpx;
		background-color: #fff;
	}

	.order-details .header {
		padding: 24rpx 40rpx;
		box-sizing: border-box;
	}

	.order-details .img-line {
		height: 1.5px;
		width: 100%;
		display: block;
	}

	.order-details .address-wrap {
		padding: 30rpx 24rpx;
	}

	.order-details .order-info {
		padding: 12rpx 0;
	}

	.order-details .order-info .item {
		padding: 12rpx 24rpx;
	}

	.order-details .order-info .item .title {
		color: #B5ADAD;
		width: 180rpx;
		flex: none;
	}

	.order-details .price>view {
		height: 60rpx;
		padding: 0 24rpx;
	}

	.order-details .footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		padding: 0 24rpx;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer .plain {
		border: 1px solid #BBBBBB;
	}

	.footer .plain.red {
		border: 1px solid $-color-primary;
	}

	.tips-dialog {
		height: 230rpx;
		width: 100%;
	}

	.order-details .invite-btn {
		background: linear-gradient(270deg, #FF2C3C 0%, #F95F2F 100%);
		margin: 30rpx 26rpx 40rpx;
	}
	
	.flag-radius{
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
	}
	.base-left{
		border-left: 2upx solid #a5a5a5;
	}
	.flag-before::before{
		position: absolute;
		content: "";
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #a5a5a5;
		left: 0;
		top: 0;
		transform: translate(-50%,0);
	}
	.start-before::before{
		position: absolute;
		content: "";
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #18B566;
		left: 0;
		top: 0;
		transform: translate(-50%,0);
	}
	.end-before::before{
		position: absolute;
		content: "";
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #df563b;
		left: 0;
		top: 0;
		transform: translate(-50%,0);
	}
	.mobile-btn{
		background-color: #df563b;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		padding:20rpx 0rpx ;
	}
	.before-address{
		min-width: 20upx;
		min-height: 20upx;
		border: 4rpx solid #149664;
		border-radius: 50%;
	}
	.after-address{
		min-width: 20upx;
		min-height: 20upx;
	     border: 4rpx solid #E85631;
		border-radius: 50%;
	}
	.add-commonl{
		width: 224upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #6C6969;
		border: 2upx solid rgba(187, 187, 187, 100);
		border-radius: 8upx;
	}
	.footer-con{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
		margin: 0 auto;
		    // width: 100%;
		    padding: 20rpx;
		    background-color: #fff;
		.footer-btn{
			color: #fff;
			height: 80upx;
			width: 716upx ;
			text-align: center;
			line-height: 80upx;
			border-radius: 12upx;
			background-color: #F27A57;
		}
	}
	.label-active{
		color: #df563b !important;
		border-color: #df563b !important;
	}
	.label-item{
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		border: 2upx solid rgba(227, 224, 224, 100);
		color: rgba(96, 92, 92, 100);
		border-radius: 8upx;
		margin-bottom: 32upx;
	}
	.eva-popup-btn{
		background-color: #E85631;
		height: 88upx;
		line-height: 88upx;
		color: #fff;
		border-radius: 8upx;
		text-align: center;
	}
</style>
